﻿@using AspNetId4Web

<div class="card" style="width:500px">

    <div class="card-header">
        <h5>
            手机验证码登录
        </h5>
    </div>

    <div class="card-body">

        @if (!string.IsNullOrWhiteSpace(ErrorMsg))
        {
            <div class="text-danger m-4">
                @ErrorMsg
            </div>
        }

        <div class="form-group form-inline">
            <label for="PhoneNumber" class="control-label">手机号</label>
            <input id="PhoneNumber" @bind="PhoneNumber" class="form-control" placeholder="请输入手机号" />
        </div>

        <div class="form-group form-inline">
            <label for="VerificationCode" class="control-label">验证码</label>
            <input id="VerificationCode" @bind="VerificationCode" class="form-control" placeholder="请输入验证码" />
            @if (CanGetVerificationCode)
            {
                <button type="button" class="btn btn-link" @onclick="GetVerificationCode">
                    获取验证码
                </button>
            }
            else
            {
                <label>@GetVerificationCodeMsg</label>
            }
        </div>

    </div>

    <div class="card-footer">
        <button type="button" class="btn btn-primary" @onclick="Login">
            登录
        </button>
    </div>

</div>

@code {

    [Parameter]
    public string ReturnUrl { get; set; }

    [Inject]
    private PhoneCodeService phoneCodeService { get; set; }

    [Inject]
    private IJSRuntime jsRuntime { get; set; }

    private string PhoneNumber;

    private string VerificationCode;

    private string ErrorMsg;

    //获取验证码按钮当前状态
    private bool CanGetVerificationCode = true;

    private string GetVerificationCodeMsg;

    //获取验证码
    private async void GetVerificationCode()
    {
        if (CanGetVerificationCode)
        {
            //发送验证码到手机号
            var result = await phoneCodeService.SendPhoneCode(PhoneNumber);

            if (result.IsError)
            {
                ErrorMsg = result.Msg;

                //通知页面更新
                StateHasChanged();

                return;
            }
            else
            {
                ErrorMsg = "";
            }

            CanGetVerificationCode = false;

            //1分钟倒计时
            for (int i = 60; i >= 0; i--)
            {
                GetVerificationCodeMsg = $"获取验证码({i})";

                await Task.Delay(1000);

                //通知页面更新
                StateHasChanged();
            }

            CanGetVerificationCode = true;

            //通知页面更新
            StateHasChanged();
        }
    }

    //登录
    private async void Login()
    {
        //手机验证码登录
        var result = await phoneCodeService.PhoneCodeLogin(PhoneNumber, VerificationCode);

        if (result.IsError)
        {
            ErrorMsg = result.Msg;

            //通知页面更新
            StateHasChanged();

            return;
        }

        string uri = $"Account/SignInByPhoneNumber?phoneNumber={PhoneNumber}&returnUrl={Uri.EscapeDataString(ReturnUrl)}";

        //要跳转到MVC控制器SignIn登录，如果直接在razor页面登录，报错Headers are read-only, response has already started
        await jsRuntime.InvokeVoidAsync("window.location.assign", uri);
    }
}
